<template>
	<view class="content">
		<view class="md5box">
			<h1 class="title">MD5的加密</h1>
			<view class="testmd5">
				MD5处理前数据：
			</view>
			<view class="btnbox">
				<textarea maxlength="-1" class="md5text" v-model="beforemd5" placeholder="" />
				<button type="primary" @click="md5">md5加密</button>
			</view>
			<view class="testmd5">
				MD5加密后的数据：
			</view>
			<textarea class="md5text" maxlength="-1" v-model="aftermd5" placeholder="" />
		</view>
		
		<view class="md5box">
			<h1 class="title">AES的加密和解密</h1>
			<view class="test">
				<view >AES处理前数据：</view>
				<textarea maxlength="-1" class="md5text" v-model="beforeAES" />
				<view >加密私钥key：</view>
				<input type="text" v-model="key" class="input1"/>
				<view >初始化向量参数iv：</view>
				<input type="text" v-model="iv" class="input1"/>
			</view>
			<view class="btnbox2" style="display: flex;">
				<button type="primary" @click="AESencrypt">AES加密</button>
				<button type="primary" @click="AESdecrypt">AES解密</button>
			</view>
			<view class="testmd5">
				AES加密/解密后的数据：
			</view>
			<textarea class="md5text" maxlength="-1" v-model="afterAES" placeholder="" />
		</view>
	</view>
</template>

<script>
	import crypto from '@/utils/crypto.js';
	export default {
		data() {
			return {
				beforemd5:'',
				aftermd5:'',
				beforeAES:'',
				afterAES:'',
				key:'1234567890abcDEF',
				iv:'1234567890abcDEF'
			}
		},
		onLoad() {
			
		},
		methods: {
			//md5进行加密处理
			md5(){
				var text=this.beforemd5
				if(text==""){
					uni.showToast({
					    title: '请输入要进行md5加密的文本',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				var afterMD5=crypto.md5(text).toLowerCase()
				this.aftermd5=afterMD5
			},
			//AES进行加密的代码
			AESencrypt(){
				var data=this.beforeAES
				var ak=this.key
				var ivstr=this.iv
				var afteraes=crypto.encrypt(data,ak,ivstr)
				this.afterAES=afteraes
			},
			//AES进行解密的代码
			AESdecrypt(){
				var data=this.beforeAES
				var ak=this.key
				var ivstr=this.iv
				var afteraes=crypto.decrypt(data,ak,ivstr)
				this.afterAES=afteraes
			}
		}
	}
</script>

<style>
	.content{
		width: 90%;
		margin: 0 auto;
	}
	.title{
		background-color: #4CD964;
		border-radius: 10rpx;
		text-align: center;
	}
	.md5text{
		display: block;
		width: 90%;
		margin: 20rpx auto;
		height: 200rpx;
		overflow: hidden;
		outline: #007AFF;
		border: 1px solid #4CD964;
	}
	.input1{
		width: 100%;
		border: 1px solid #4CD964;
		margin: 20rpx 0;
	}
</style>
